<template>
  <a-row :gutter="30">
    <a-col :span="12">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" title="好友列表">
          <FriendList
            title="源微信"
            :selectedWxid="props.selectedWxid"
            v-model:selectedKeys="selectedFriendKeys1"
          />
        </a-tab-pane>
        <a-tab-pane key="2" title="群列表">
          <GroupList
            title="源微信群"
            :selectedWxid="props.selectedWxid"
            v-model:selectedKeys="selectedGroupKeys1"
          />
        </a-tab-pane>
      </a-tabs>
    </a-col>
    <a-col :span="12">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" title="好友列表">
          <FriendList
            title="目标微信"
            :selectedWxid="props.selectedWxid"
            v-model:selectedKeys="selectedFriendKeys2"
          />
        </a-tab-pane>
        <a-tab-pane key="2" title="群列表">
          <GroupList
            title="目标微信群"
            :selectedWxid="props.selectedWxid"
            v-model:selectedKeys="selectedGroupKeys2"
          />
        </a-tab-pane>
      </a-tabs>
    </a-col>
    <a-divider />
    <div
      style="text-align: center; width: 100%"
      v-if="selectedKeys1.length > 0 || selectedKeys2.length > 0"
    >
      <a-space direction="vertical" fill>
        <a-alert type="success">
          {{ selectedKeys1 }} 转发到 {{ selectedKeys2 }}
        </a-alert>
        <a-button @click="handleReset">重置</a-button>
      </a-space>
    </div>
  </a-row>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { createForward } from '@/api/chat';
  import { Message } from '@arco-design/web-vue';
  import FriendList from './forward-friendlist.vue';
  import GroupList from './forward-grouplist.vue';

  const props = defineProps<{
    selectedWxid: string;
  }>();

  // 存储源和目标选中的 wxid 列表
  const selectedFriendKeys1 = ref<string[]>([]);
  const selectedFriendKeys2 = ref<string[]>([]);
  const selectedGroupKeys1 = ref<string[]>([]);
  const selectedGroupKeys2 = ref<string[]>([]);
  const selectedKeys1 = ref<string[]>([]);
  const selectedKeys2 = ref<string[]>([]);

  const handleReset = () => {
    selectedFriendKeys1.value = [];
    selectedFriendKeys2.value = [];
    selectedGroupKeys1.value = [];
    selectedGroupKeys2.value = [];
    selectedKeys1.value = [];
    selectedKeys2.value = [];
  };

  const create = async () => {
    // 父组件点 ok执行该方法
    try {
      const res: any = await createForward({
        ownerWxid: props.selectedWxid,
        tolist: selectedKeys1.value,
        fromlist: selectedKeys2.value,
      });
      if (res.code === 20000) {
        Message.success('转发创建成功');
      } else {
        Message.error(res.msg || '转发创建失败');
      }
    } catch (error) {
      Message.error('转发创建失败，请稍后再试');
    }
  };
  // 合并源侧选中项
  watch(
    () => [selectedFriendKeys1.value, selectedGroupKeys1.value],
    ([friendKeys, groupKeys]) => {
      selectedKeys1.value = Array.from(new Set([...friendKeys, ...groupKeys]));
    },
    { deep: true }
  );

  // 合并目标侧选中项
  watch(
    () => [selectedFriendKeys2.value, selectedGroupKeys2.value],
    ([friendKeys, groupKeys]) => {
      selectedKeys2.value = Array.from(new Set([...friendKeys, ...groupKeys]));
    },
    { deep: true }
  );

  // 暴露给父组件调用
  defineExpose({ create });
</script>
